<template>
  <div class="leftBar">
    <router-link to="/SimulationPage" id="simulationLink" class="leftBarItem">
      <img src="@/assets/logo.png" width="30px" />
    </router-link>
    <router-link to="/DataPage" id="dataLink" class="leftBarItem">
      <img src="@/assets/data.svg" width="30px" />
    </router-link>
    <div id="exportData" class="leftBarItem" @click="showExportDataDialog">
      <img src="@/assets/exportData.svg" width="30px" />
    </div>
    <div id="about" class="leftBarItem" @click="showAboutDialog">
      <img src="@/assets/about.svg" width="30px" />
    </div>
		<data-export-dialog ref="dataExportDialog"></data-export-dialog>
		<about-dialog ref="aboutDialog"></about-dialog>
	</div>
</template>

<script>
	
import DataExportDialog from '@/components/leftbar/dialog/DataExportDialog.vue'
import AboutDialog from '@/components/leftbar/dialog/AboutDialog.vue'


export default {
  name: "left-bar",
	components: {
    DataExportDialog,
    AboutDialog
	},
	methods: {
		showExportDataDialog() {
			this.$refs.dataExportDialog.dialogVisible = true;
    },
    showAboutDialog() {
			this.$refs.aboutDialog.dialogVisible = true;
		}
	}
};
</script>

<style>
.leftBar {
  width: 50px;
  height: 800px;
  float: left;
  border-radius: 20px 0 0 20px;
  background-color: #d8dbe2;
  -webkit-app-region: drag;
}

.leftBarItem {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  -webkit-app-region: no-drag;
}

.leftBarItem:hover {
  background-color: #c5b5f0;
}

.leftBarItem:active {
  transform: scale(1.2);
}

.router-link-active {
  background-color: #c5b5f0;
}

#simulationLink {
  margin-top: 50px;
}

#dataLink {
  margin-top: 40px;
}

#exportData {
  margin-top: 500px;
}

#about {
  margin-top: 30px;
}

</style>
